<template>
  <div class="analyze-data">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>行为分析</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pageName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="data-content">
      <div class="left-content">
        <div class="top">
          <div class="name-box">
            <div class="back" @click="jumpToAnalysisModel">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="name">{{ pageName }}</div>
          </div>
          <div class="filter-condition">
            <el-form
              :model="form"
              :inline="true"
              ref="form"
              size="medium"
              label-width="65px"
              class="demo-form"
            >
              <el-row>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                  <el-form-item label="用户ID">
                    <el-input
                      style="width: 100%"
                      v-model="form.personId"
                      placeholder="请输入用户ID"
                      @keyup.native.enter="handleFormSearch"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                  <el-form-item label="来源用户ID" label-width="100px">
                    <el-input
                      style="width: 100%"
                      v-model="form.jumpPersonId"
                      placeholder="请输入来源用户ID"
                      @keyup.native.enter="handleFormSearch"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                  <el-form-item label="项目名称" label-width="80px">
                    <el-select
                      style="width: 100%"
                      v-model="form.cardType"
                      placeholder="请选择项目名称"
                      filterable
                      clearable
                      @change="handleCardTypeChange"
                    >
                      <el-option
                        v-for="item in cardTypeList"
                        :key="item.value"
                        :label="item.cardName"
                        :value="item.cardType"
                      >
                        <span>{{ item.cardName }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="16" :xl="16">
                  <el-form-item label="时间">
                    <el-date-picker
                      v-model="form.searchTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      @change="handleFormSearch"
                      align="right"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                  <el-form-item label-width="40px">
                    <el-button
                      type="primary"
                      size="medium"
                      @click="handleFormSearch"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-name">
            数据详情
            <i class="el-icon-question"></i>
            <el-tooltip
              effect="light"
              content="导出仅包含筛选时间中结尾时间的近7日数据"
              placement="top"
            >
              <el-button
                size="small"
                class="exportBtn"
                plain
                round
                @click="exportData"
                :loading="exportLoading"
              >
                {{ exportLoading ? "导出中..." : "导出数据" }}
              </el-button>
            </el-tooltip>
          </div>
          <el-table :data="tableData" style="width: 100%; margin-top: 12px">
            <el-table-column prop="etName" label="事件名称" min-width="10%">
            </el-table-column>
            <el-table-column prop="personName" label="用户姓名" min-width="10%">
            </el-table-column>
            <el-table-column prop="personId" label="用户ID" min-width="10%">
            </el-table-column>
            <el-table-column
              prop="consultantName"
              label="顾问姓名"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="sourceTypeDesc"
              label="来源类型名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="cardTypeName"
              label="项目名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="jumpSourceDesc"
              label="来源名称"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="stayTime"
              label="用户停留时间"
              min-width="10%"
            >
            </el-table-column>
            <el-table-column
              prop="jumpPersonName"
              label="来源用户姓名"
              min-width="15%"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.jumpPersonName || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="regtime" label="注册时间" min-width="15%">
              <template slot-scope="scope">
                <span>{{ scope.row.regtime || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="访问时间" min-width="15%">
            </el-table-column>
          </el-table>
        </div>
        <div class="pager">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import { apiJava } from "@/api/root";
import { downLoadFile } from "@/utils/downLoadFile";
import { actDetailList, applicationList } from "@/api/index";

import StackedLineChart from "./StackedLineChart.vue";
export default {
  components: {
    StackedLineChart,
  },
  props: {},
  data() {
    return {
      exportLoading: false,
      total: 0,
      pageName: "未命名",
      etId: "",
      selectDate: "",
      granularity: "",
      granularityOptions: [
        {
          value: 10,
          label: "天",
        },
        {
          value: 20,
          label: "周",
        },
        {
          value: 30,
          label: "月",
        },
      ],
      middleLeftTitle: [
        {
          name: "营销页-人数",
          color: "#26C689",
        },
        {
          name: "基础监控-人数",
          color: "#735AFF",
        },
      ],
      xData: [],
      buyPageData: [],
      basicData: [],
      buyPageName: "",
      basicName: "",
      tableData: [],
      page: {
        currentPage: 1,
        pageSizes: 10,
        pageSize: 10,
      },
      form: {
        searchTime: "",
        personId: "",
        jumpPersonId: "",
        cardType: "",
      },
      cardTypeList: [],
    };
  },
  methods: {
    getSevenDaysAgo(date) {
      const d = new Date(date);
      d.setDate(d.getDate() - 7);
      const pad = (num) => num.toString().padStart(2, "0");
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
        d.getDate()
      )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    },
    exportData() {
      if (!this.form.searchTime.length) {
        this.$message.error("请先筛选时间！");
        return;
      }
      const selectedFirstTime = this.form.searchTime[0];
      const SevenDaysAgo = this.getSevenDaysAgo(this.form.searchTime[1]);
      let currentStartTime = "";

      if (
        new Date(selectedFirstTime).getTime() > new Date(SevenDaysAgo).getTime()
      ) {
        currentStartTime = selectedFirstTime;
      } else {
        currentStartTime = SevenDaysAgo;
      }
      this.exportLoading = true;
      let params = {
        pageNo: 1,
        pageSize: 9999,
        currentStartTime,
        currentEndTime: this.form.searchTime[1],
        etId: this.etId,
      };
      console.log("params", params);
      Axios({
        method: "post",
        url: apiJava + "/api-career/event/stat/act/detail/export",
        data: params,
        responseType: "arraybuffer",
        headers: {},
        timeout: "60000",
      })
        .then((res) => {
          downLoadFile(res, this.pageName + "数据.xlsx");
        })
        .catch(() => {
          this.$message.error("导出失败");
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    jumpToAnalysisModel() {
      this.form.personId = "";
      this.$emit("jumpToAnalysisModel");
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.handleSearch();
    },
    handleFormSearch(val) {
      this.page.currentPage = 1;
      this.handleSearch();
    },
    applicationListFn() {
      applicationList().then((res) => {
        if (res.code == 200) {
          let temp = [];
          res.data.forEach((item) => {
            if (Array.isArray(item.cardTypeList)) {
              temp = temp.concat(item.cardTypeList);
            }
          });
          this.cardTypeList = temp;
          this.cardTypeList.reverse();
        }
      });
    },
    handleCardTypeChange(val) {
      this.page.currentPage = 1;
      this.handleSearch();
    },
    async handleSearch() {
      console.log("this.form.searchTime", this.form.searchTime);
      const params = {
        currentStartTime: this.form.searchTime[0],
        currentEndTime: this.form.searchTime[1],
        personId: this.form.personId,
        jumpPersonId: this.form.jumpPersonId,
        cardType: this.form.cardType,
        pageNo: this.page.currentPage,
        pageSize: 10,
        etId: this.etId,
      };
      const res = await actDetailList(params);
      if (res.code == 200) {
        this.tableData = res.data;
        this.total = res.pageparam.sums;
      }
    },
    initMyChart() {
      this.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
      this.buyPageData = [120, 132, 101, 134, 90, 230, 210];
      this.basicData = [220, 182, 191, 234, 290, 330, 310];
      this.buyPageName = "营销页-人数";
      this.basicName = "基础监控-人数";
    },
    getParams() {
      const currentRow = JSON.parse(sessionStorage.getItem("analyzeData"));
      this.pageName = currentRow.etName;
      this.etId = currentRow.etId;
    },
  },
  activated() {
    this.getParams();
    let isDate = new Date();
    let yesterday = new Date(isDate);
    yesterday.setDate(isDate.getDate() - 1);
    let sTime = `${yesterday.getFullYear()}-${
      yesterday.getMonth() + 1
    }-${yesterday.getDate()}`;
    sTime = `${sTime}`;
    this.form.searchTime = sTime; // 显示的默认时间
    this.form.searchTime = [
      this.form.searchTime + " 00:00:00",
      this.form.searchTime + " 23:59:59",
    ]; // 显示的默认时间
    this.initMyChart();
    this.handleFormSearch();
    this.applicationListFn();
  },
};
</script>

<style lang="scss" scoped>
.analyze-data {
  height: 100%;
  background: url("../../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 13px;

  .breadcrumb {
    height: 20px;
    padding-left: 8px;
  }

  .data-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    height: calc(100% - 36px);

    .left-content {
      flex: 1;
      background: #f0f2f5;
      margin-right: 14px;
      padding: 8px;

      .top,
      .middle,
      .bottom {
        width: 100%;
        border-radius: 8px;
        background: #ffffff;

        .exportBtn {
          height: 32px;
          margin-left: 12px;
        }
      }

      .top {
        height: 200px;
        padding: 24px;
        // display: flex;
        flex-direction: row;
        // justify-content: space-between;
        align-items: center;

        .name-box {
          display: flex;
          align-items: center;

          .back {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: #e9e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            cursor: pointer;
          }

          .name {
            font-weight: 800;
          }
        }

        span {
          margin-right: 10px;
        }

        .filter-condition {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 12px;
          /deep/ .el-range-editor.el-input__inner {
            height: 36px;
            // width: 250px;
          }
          /deep/ .el-form--inline .el-form-item {
            // margin-bottom: 0 !important;
          }
          /deep/ .el-form--inline {
            display: flex;
            align-items: center;
          }

          /deep/ .el-date-editor .el-range-separator {
            width: 10%;
            line-height: 28px;
          }

          /deep/ .el-date-editor .el-range__icon {
            display: none;
          }

          /deep/ .el-date-editor--daterange.el-input__inner {
            width: 250px;
          }
        }
      }

      .middle {
        padding: 16px;
        margin-top: 16px;
        height: 400px;

        .middle-name {
          color: #222222;
        }

        .middle-content {
          display: flex;
          flex-direction: row;
          height: 350px;
          padding: 32px 20px;
          box-sizing: border-box;
          justify-content: space-between;

          .middle-left {
            flex-basis: 200px;

            .title-box {
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-bottom: 12px;

              .color-box {
                border-radius: 50%;
                width: 16px;
                height: 16px;
                margin-right: 5px;
              }

              .title-name {
                color: "#22222";
                font-weight: 800;
                font-size: 14px;
              }
            }
          }

          .middle-right {
            flex: 1;
          }
        }
      }

      .bottom {
        padding: 16px;
        margin-top: 16px;

        .bottom-name {
          color: #222222;
        }
      }
    }

    .right-content {
      width: 205px;
      height: 155px;
      background: #ffffff;
      border-radius: 8px;
      padding: 16px 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      color: #222222;

      .title {
        font-size: 24px;
        font-weight: 800;
      }
    }
  }
}
</style>
